<template>
  <div class="time-comb">
    <el-form-item v-if="!onlyDate" :label="label">
      <el-radio-group v-model="state.dateCode" @change="dateChange">
        <el-radio v-for="item in timesOptions" :key="item.code" :border="true" :label="item.code">{{
          item.value
        }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="onlyDate ? label : ''">
      <el-date-picker
        v-model="state.dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :value-format="valueFormat"
        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
        :shortcuts="shortcuts"
        @change="datePickerChange"
      />
    </el-form-item>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'TimeComb',
})
</script>

<script lang="ts" setup>
import {
  computed,
  defineComponent,
  defineEmits,
  defineExpose,
  defineProps,
  PropType,
  reactive,
  watch,
} from 'vue'

import { parseTime, setEndTime, setStartTime } from '@/utils/time'

import IBaseObj from '#/index'

const props = defineProps({
  label: {
    type: String,
    default: '时间',
  },
  timesOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  dateCode: {
    type: Number,
    default: 0,
  },
  startDate: {
    type: String,
    default: '',
  },
  endDate: {
    type: String,
    default: '',
  },
  // 只需要日期
  type: {
    type: String,
    default: 'time',
  },
  shortcuts: {
    type: Array as PropType<IBaseObj[]>,
    default: () => {
      return [
        {
          text: '最近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            setStartTime(start)
            setEndTime(end)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        },
        {
          text: '最近半年',
          value: () => {
            const end = new Date()
            const start = new Date()
            setStartTime(start)
            setEndTime(end)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            return [start, end]
          },
        },
      ]
    },
  },
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss',
  },
})
const emit = defineEmits(['update:start-date', 'update:end-date', 'update:date-code', 'changeTime'])

const state = reactive({
  dateCode: 0,
  dateRange: [],
})

const onlyDate = computed(() => props.timesOptions.length === 0)

watch(
  () => props.dateCode,
  (val) => {
    console.log('dateCode', props.dateCode)
    state.dateCode = val
  },
  { immediate: true }
)
watch(
  () => props.startDate,
  (val) => {
    if (!val) {
      state.dateRange = []
    }
  }
)

const dateChange = () => {
  state.dateRange = []
  emit('update:start-date', '')
  emit('update:end-date', '')
  emit('update:date-code', state.dateCode)
  changeTime()
}

const datePickerChange = () => {
  if (state.dateRange?.length > 0) {
    const [startDate, endDate] = state.dateRange
    state.dateCode = 0
    emit(
      'update:start-date',
      props.type === 'date' ? parseOnlyDate(startDate) : parseTime(startDate)
    )
    emit('update:end-date', props.type === 'date' ? parseOnlyDate(endDate) : parseTime(endDate))
    emit('update:date-code', '')
  } else {
    // 如果 dateRange 为空，默认选中第一个时间
    props.timesOptions.length > 0 && (state.dateCode = props.timesOptions[0].code)
    emit('update:start-date', '')
    emit('update:end-date', '')
    emit('update:date-code', state.dateCode)
  }
  changeTime()
}

const changeTime = () => {
  emit('changeTime')
}

const parseOnlyDate = (date: Date) => {
  return parseTime(date, '{y}-{m}-{d}')
}

const initDate = (date: []) => {
  state.dateRange = date
  datePickerChange()
  console.log('d', date)
}

defineExpose({
  initDate,
})
</script>

<style lang="scss" scoped>
.time-comb {
  display: flex;

  :deep() {
    // 时间选择器的颜色不随主题的改变而改变
    .el-date-editor {
      height: 28px;
      line-height: 28px;
      color: var(--color-white);
      background: var(--color-primary);

      .el-range__icon {
        color: var(--color-white);
      }

      .el-range-input {
        color: var(--color-white);
        background: var(--color-primary);

        &::placeholder {
          color: var(--color-white);
        }
      }

      .el-range-separator {
        color: var(--color-white);
      }
    }

    .el-radio-group {
      .el-radio-button {
        .el-radio-button__inner {
          padding-right: 30px;
          padding-left: 30px;
          color: var(--submenu-text-color);
          background: var(--tab-item-color);
          border: none;
        }

        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          background: var(--submenu-background-active-color);
          border: none;
        }
      }

      .el-radio-button:first-child .el-radio-button__inner {
        margin-right: 2px;
        border-radius: 13px 0 0 13px;
      }

      .el-radio-button:last-child .el-radio-button__inner {
        margin-right: 5px;
        border-radius: 0 13px 13px 0;
      }

      .el-radio {
        padding: 6px 30px 0 20px;
        margin-right: 0;
        background: var(--tab-item-color);
        border: none;
        border-radius: 13px;

        .el-radio__input {
          display: none;
        }

        .el-radio__label {
          color: var(--color-base);
        }

        &.is-bordered.is-checked {
          color: var(--submenu-text-color-active);
          background: var(--submenu-background-active-color);

          .el-radio__label {
            color: var(--submenu-text-color-active);
          }
        }
      }
    }
  }
}
</style>
